<template>
  <div class="clock-container">
    <div
      v-for="(item, i) in monthText"
      id="month"
      class="text-box"
      :key="'month' + i"
      :style="{ transform: item.transform, color: item.color }"
    >
      {{ item.text }}
    </div>
    <div
      v-for="(item, i) in dateText"
      id="date"
      class="text-box"
      :key="'date' + i"
      :style="{ transform: item.transform, color: item.color }"
    >
      {{ item.text }}
    </div>
    <div
      v-for="(item, i) in weekText"
      id="week"
      class="text-box"
      :key="'week' + i"
      :style="{ transform: item.transform, color: item.color }"
    >
      {{ item.text }}
    </div>
    <div
      v-for="(item, i) in hourText"
      id="hour"
      class="text-box"
      :key="'hour' + i"
      :style="{ transform: item.transform, color: item.color }"
    >
      {{ item.text }}
    </div>
    <div
      v-for="(item, i) in minText"
      id="min"
      class="text-box"
      :key="'min' + i"
      :style="{ transform: item.transform, color: item.color }"
    >
      {{ item.text }}
    </div>

    <div
      v-for="(item, i) in secText"
      id="sec"
      class="text-box"
      :key="'sec' + i"
      :style="{ transform: item.transform, color: item.color }"
    >
      {{ item.text < 10 ? '0' + item.text : item.text }}
    </div>
  </div>
</template>
<script>
export default {
  name: 'clock',
  data() {
    return {
      monthText: [],
      dateText: [],
      weekText: [
        { text: '星期一' },
        { text: '星期二' },
        { text: '星期三' },
        { text: '星期四' },
        { text: '星期五' },
        { text: '星期六' },
        { text: '星期天' },
      ],
      hourText: [],
      minText: [],
      secText: [],
      time: {
        year: 0,
        month: 0,
        date: 0,
        week: 0,
        hour: 0,
        min: 0,
        sec: 0,
      },
      timer: null,
      days: 0,
    }
  },
  methods: {
    setTimeText() {
      for (var i = 1; i < 13; i++) {
        var temp = {
          text: i + '月',
          transform:
            'rotate(' + (360 / 12) * (i - 1) + 'deg) translateX(0.625rem)',
        }
        this.monthText.push(temp)
      }
      this.days = this.getMonthDays(this.time.year, this.time.month)
      for (var i = 1; i < this.days + 1; i++) {
        var temp = {
          text: i + '日',
          transform:
            'rotate(' + (360 / 30) * (i - 1) + 'deg) translateX(1.25rem)',
        }
        this.dateText.push(temp)
      }
      for (var i = 0; i < 7; i++) {
        this.weekText[i].transform =
          'rotate(' + (360 / 7) * i + 'deg) translateX(1.875rem)'
      }
      for (var i = 0; i < 24; i++) {
        var temp = {
          text: i + '点',
          transform: 'rotate(' + (360 / 24) * i + 'deg) translateX(2.5rem)',
        }
        this.hourText.push(temp)
      }
      for (var i = 0; i < 60; i++) {
        var temp = {
          text: i + '分',
          transform: 'rotate(' + (360 / 60) * i + 'deg) translateX(3.125rem)',
        }
        this.minText.push(temp)
      }
      for (var i = 0; i < 60; i++) {
        var temp = {
          text: i,
          transform: 'rotate(' + (360 / 60) * +i + 'deg) translateX(3.75rem)',
        }
        this.secText.push(temp)
      }
    },
    getTime() {
      clearTimeout(this.timer)
      var now = new Date()
      this.time.year = now.getFullYear()
      this.time.month = now.getMonth() + 1
      this.time.date = now.getDate()
      this.time.week = now.getDay()
      this.time.hour = now.getHours()
      this.time.min = now.getMinutes()
      this.time.sec = now.getSeconds()
      this.circleTime()
      this.timer = setTimeout(() => {
        this.getTime()
      }, 1000)
    },
    circleTime() {
      for (var i = 0; i < 60; i++) {
        this.secText[i].transform =
          'rotate(' +
          (360 / 60) * +(i - this.time.sec) +
          'deg) translateX(3.75rem)'
        this.secText[i].color = '#4d4d4d'
      }
      this.secText[this.time.sec].color = '#ffffff'
      for (var i = 0; i < 60; i++) {
        this.minText[i].transform =
          'rotate(' +
          (360 / 60) * +(i - this.time.min) +
          'deg) translateX(3.125rem)'
        this.minText[i].color = '#4d4d4d'
      }
      this.minText[this.time.min].color = '#ffffff'

      for (var i = 0; i < 24; i++) {
        this.hourText[i].transform =
          'rotate(' +
          (360 / 24) * +(i - this.time.hour) +
          'deg) translateX(2.5rem)'
        this.hourText[i].color = '#4d4d4d'
      }
      this.hourText[this.time.hour].color = '#ffffff'

      for (var i = 0; i < 7; i++) {
        this.weekText[i].transform =
          'rotate(' +
          (360 / 7) * +(i + 1 - this.time.week) +
          'deg) translateX(1.875rem)'
        this.weekText[i].color = '#4d4d4d'
      }
      this.weekText[this.time.week - 1].color = '#ffffff'

      for (var i = 0; i < this.dateText.length; i++) {
        this.dateText[i].transform =
          'rotate(' +
          (360 / this.dateText.length) * +(i + 1 - this.time.date) +
          'deg) translateX(1.25rem)'
        this.dateText[i].color = '#4d4d4d'
      }
      this.dateText[this.time.date - 1].color = '#ffffff'

      for (var i = 0; i < 12; i++) {
        this.monthText[i].transform =
          'rotate(' +
          (360 / 12) * +(i + 1 - this.time.month) +
          'deg) translateX(0.625rem)'
        this.monthText[i].color = '#4d4d4d'
      }
      this.monthText[this.time.month - 1].color = '#ffffff'
    },
    getMonthDays(year, month) {
      var stratDate = new Date(year, month - 1, 1)
      var endData = new Date(year, month, 1)
      var days = (endData - stratDate) / (1000 * 60 * 60 * 24)
      return days
    },
  },

  mounted() {
    this.setTimeText()
    this.timer = setTimeout(this.getTime(), 1000)
  },
}
</script>
<style>
* {
  margin: 0;
  padding: 0;
}
.clock-container {
  width: 24rem;
  height: 20rem;
  background-color: skyblue;
  font-size: 0.2rem;
  scroll-behavior: smooth;
}
.text-box {
  position: fixed;
  display: inline-block;
  left: 50%;
  top: 450px;
  transition: all 0.5s;
  scroll-behavior: smooth;
}
</style>
